<!DOCTYPE html>
{% load i18n %}
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon" type="image/png" href="/static/favicon.ico"/>
    <link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
    {% include 'show/link.html'%}
    <title>{% trans '添加银行卡' %}</title>
    <style>
        .panel {
            border-radius: 0px;
            border:1px solid #f1f1f1
        }
        .panel-heading {
            border-radius: 0px;
        }
    </style>

    <script>
        $(document).ready(function() {
            init()
            $("#add_card_button").click(function()
            {
                add_card()
            });
        })

        function add_card()
        {
            $.post("{% url 'add_bankinfo' %}",
            $("#bankinfo").serialize(),
            function(ret){
                if (ret == '0') {
                    $("#msg").html("{% trans '添加成功' %}")
                }
                else if (ret == '1') {
                    $("#msg").html("{% trans '银行卡信息已经存在，请删除后再添加' %}")
                }
                else {
                    $("#msg").html("{% trans '添加失败' %}")
                }
            })
        }

        var provinces = {% trans "['请选择省份','北京市','上海市','天津市','重庆市','河北省','山西省','内蒙古省','辽宁省','吉林省','黑龙江省','江苏省','浙江省','安徽省','福建省','江西省','山东省','河南省','湖北省','湖南省','广东省','广西省','海南省','四川省','贵州省','云南省','西藏省','陕西省','甘肃省','宁夏省','青海省','新疆省',]" %};
        var citys = {% trans "[['请选择城市']" %},
        ['北京市'],
        ['上海市'],
        ['天津市'],
        ['重庆市'],
        ['石家庄市','张家口市','承德市','秦皇岛市','唐山市','廊坊市','保定市','衡水市','沧州市','邢台市','邯郸市'],
        ['太原市','朔州市','大同市','阳泉市','长治市','晋城市','忻州市','晋中市','临汾市','吕梁市','运城市'],
        ['呼和浩特市','包头市','乌海市','赤峰市','通辽市','呼伦贝尔市','鄂尔多斯市','乌兰察布市','巴彦淖尔市','兴安盟','锡林郭勒盟','阿拉善盟'],
        ['沈阳市','朝阳市','阜新市','铁岭市','抚顺市','本溪市','辽阳市','鞍山市','丹东市','大连市','营口市','盘锦市','锦州市','葫芦岛市'],
        ['长春市','白城市','松原市','吉林市','四平市','辽源市','通化市','白山市','延边州'],
        ['哈尔滨市','齐齐哈尔市','七台河市','黑河市','大庆市','鹤岗市','伊春市','佳木斯市','双鸭山市','鸡西市','牡丹江市','绥化市','大兴安岭地区'],
        ['南京市','徐州市','连云港市','宿迁市','淮安市','盐城市','扬州市','泰州市','南通市','镇江市','常州市','无锡市','苏州市'],
        ['杭州市','湖州市','嘉兴市','舟山市','宁波市','绍兴市','衢州市','金华市','台州市','温州市','丽水市'],
        ['合肥市','宿州市','淮北市','亳州市','阜阳市','蚌埠市','淮南市','滁州市','马鞍山市','芜湖市','铜陵市','安庆市','黄山市','六安市','巢湖市','池州市','宣城市'],
        ['福州市','南平市','莆田市','三明市','泉州市','厦门市','漳州市','龙岩市','宁德市'],
        ['南昌市','九江市','景德镇市','鹰潭市','新余市','萍乡市','赣州市','上饶市','抚州市','宜春市','吉安市'],
        ['济南市','青岛市','聊城市','德州市','东营市','淄博市','潍坊市','烟台市','威海市','日照市','临沂市','枣庄市','济宁市','泰安市','莱芜市','滨州市','菏泽市'],
        ['郑州市','开封市','三门峡市','洛阳市','焦作市','新乡市','鹤壁市','安阳市','濮阳市','商丘市','许昌市','漯河市','平顶山市','南阳市','信阳市','周口市','驻马店市','济源市'],
        ['武汉市','十堰市','襄樊市','荆门市','孝感市','黄冈市','鄂州市','黄石市','咸宁市','荆州市','宜昌市','随州市','省直辖县级行政单位','恩施州'],
        ['长沙市','张家界市','常德市','益阳市','岳阳市','株洲市','湘潭市','衡阳市','郴州市','永州市','邵阳市','怀化市','娄底市','湘西州'],
        ['广州市','深圳市','清远市','韶关市','河源市','梅州市','潮州市','汕头市','揭阳市','汕尾市','惠州市','东莞市','珠海市','中山市','江门市','佛山市','肇庆市','云浮市','阳江市','茂名市','湛江市'],
        ['南宁市','桂林市','柳州市','梧州市','贵港市','玉林市','钦州市','北海市','防城港市','崇左市','百色市','河池市','来宾市','贺州市'],
        ['海口市','三亚市','省直辖县级行政单位'],
        ['成都市','广元市','绵阳市','德阳市','南充市','广安市','遂宁市','内江市','乐山市','自贡市','泸州市','宜宾市','攀枝花市','巴中市','达州市','资阳市','眉山市','雅安市','阿坝州','甘孜州','凉山州'],
        ['贵阳市','六盘水市','遵义市','安顺市','毕节地区','铜仁地区','黔东南州','黔南州','黔西南州'],
        ['昆明市','曲靖市','玉溪市','保山市','昭通市','丽江市','思茅市','临沧市','德宏州','怒江州','迪庆州','大理州','楚雄州','红河州','文山州','西双版纳州'],
        ['拉萨市','那曲地区','昌都地区','林芝地区','山南地区','日喀则地区','阿里地区'],
        ['西安市','延安市','铜川市','渭南市','咸阳市','宝鸡市','汉中市','榆林市','安康市','商洛市'],
        ['兰州市','嘉峪关市','白银市','天水市','武威市','酒泉市','张掖市','庆阳市','平凉市','定西市','陇南市','临夏州','甘南州'],
        ['西宁市','海东地区','海北州','海南州','黄南州','果洛州','玉树州','海西州'],
        ['银川市','石嘴山市','吴忠市','固原市','中卫市'],
        ['乌鲁木齐市','克拉玛依市','自治区直辖县级行政单位','喀什地区','阿克苏地区','和田地区','吐鲁番地区','哈密地区','克孜勒苏柯州','博尔塔拉州','昌吉州','巴音郭楞州','伊犁州','塔城地区','阿勒泰地区'],
        ['香港'],
        ['澳门'],
        ['台北市','高雄市','台中市','花莲市','基隆市','嘉义市','金门市','连江市','苗栗市','南投市','澎湖市','屏东市','台东市','台南市','桃园市','新竹市','宜兰市','云林市','彰化市']];

        function init(){
            var province = document.getElementById('param_province');
            //给选择框一个高度，可直接写进数据，不然要先创建dom元素option再录值
            province.length=provinces.length;
            for(var i=0;i<provinces.length;i++){
                province.options[i].text=provinces[i];
                province.options[i].value=provinces[i];
            }
        }

        function provincechange(n){
            var city = document.getElementById('param_city');
            var citystemp=citys[n];
            city.length=citystemp.length;
            for(var i=0;i<citystemp.length;i++){
                city.options[i].text=citystemp[i];
                city.options[i].value=citystemp[i];
            }
            city.options[0].selected=true;
        }
    </script>
</head>

<body>
<div class="main_body">
    <div class="container">
        <br>
        <ol class="breadcrumb">
            <li><a href="{%url 'c2c'%}?m=1">{% trans '点对点交易' %}</a></li>
        </ol>
        <div class="alert alert-warning alert-dismissible" role="alert">
            {% trans '点对点充值和提现需要绑定银行卡,为了你的资金安全，需要用绑定的银行卡进行收款和付款' %}
        </div>
        <div class="panel panel-bm ">
            <div class="panel-heading">
                {% trans '添加银行卡' %}
            </div>
            <div class="panel-body row">
                <form class="form-horizontal" id="bankinfo" method="post" role="form">
                    <div class="col-xs-12 col-md-6">
                        <div class="form-group">
                            <div class="col-sm-offset-1 col-sm-10 col-xs-12">
                                <div class="input-group">
                                    <span class="input-group-addon green">{% trans '银行' %}</span>
                                    <select class="form-control" name="bank">
                                        <option value="工商银行">{% trans '工商银行' %}</option>
                                        <option value="农业银行">{% trans '农业银行' %}</option>
                                        <option value="建设银行">{% trans '建设银行' %}</option>
                                        <option value="交通银行">{% trans '交通银行' %}</option>
                                        <option value="招商银行">{% trans '招商银行' %}</option>
                                        <option value="中国银行">{% trans '中国银行' %}</option>
                                        <option value="民生银行">{% trans '民生银行' %}</option>
                                        <option value="光大银行">{% trans '光大银行' %}</option>
                                        <option value="中信银行">{% trans '中信银行' %}</option>
                                        <option value="浦发银行">{% trans '浦发银行' %}</option>
                                        <option value="兴业银行">{% trans '兴业银行' %}</option>
                                        <option value="广发银行">{% trans '广发银行' %}</option>
                                        <option value="深发银行">{% trans '深发银行' %}</option>
                                        <option value="平安银行">{% trans '平安银行' %}</option>
                                        <option value="邮政银行">{% trans '邮政银行' %}</option>
                                        <!---
                                        <option value="CMBC">{% trans '民生银行' %}</option>
                                        <option value="CEBBANK">{% trans '光大银行' %}</option>
                                        <option value="CITIC">{% trans '中信银行' %}</option>
                                        <option value="SPDB">{% trans '浦发银行' %}</option>
                                        <option value="CIB">{% trans '兴业银行' %}</option>
                                        <option value="GDB">{% trans '广发银行' %}</option>
                                        <option value="SDB">{% trans '深发银行' %}</option>
                                        <option value="SPABANK">{% trans '平安银行' %}</option>
                                        <option value="POSTGC">{% trans '邮政银行' %}</option>
                                        -->
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-1 col-sm-10 col-xs-12">
                                <div class="input-group">
                                    <span class="input-group-addon green">{% trans '开户行所在地' %}</span>
                                    <div class="col-sm-6 f-pz">
                                        <select class="form-control" name="province" id="param_province" onchange="provincechange(this.selectedIndex)">
                                            <option>{% trans '请选择省份' %}</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-6 f-pz">
                                        <select class="form-control" name="city" id="param_city">
                                            <option>{% trans '请选择城市' %}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-1 col-sm-10 col-xs-12">
                                <div class="input-group">
                                    <span class="input-group-addon green">{% trans '银行卡姓名' %}</span>
                                    <input type="text" class="form-control" name="bank_account_name" id="bank_name" value="">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-1 col-sm-10 col-xs-12">
                                <div class="input-group">
                                    <span class="input-group-addon green">{% trans '卡号' %}</span>
                                    <input type="text" class="form-control" name="bank_account" id="bank_account">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-1 col-sm-10 col-xs-12">
                                <div class="input-group">
                                    <span class="input-group-addon green">{% trans '开户支行名称' %}</span>
                                    <input type="text" class="form-control" name="bank_branch" id="bank_branch">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-1 col-sm-10 col-xs-11">
                                <button type="button" id="add_card_button" class="btn btn-block btn-danger" data-toggle="tooltip">{% trans '添加绑定银行卡' %}</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label id="msg" class="col-sm-offset-1 col-sm-10 col-xs-11 red"></label>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>
